<template>
  <div class="skill-editor">
    <div class="skill-editor-title mask">

    </div>
    <div class="skill-editor-list mask"></div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import AttrItem from '../../components/manager/people/AttrItem.vue'

export default {
  components: {AttrItem},
  setup() {
    const state = reactive({
      obj: {
        name: 'a',
        age: 12,
        gender: '女'
      },
      attr : {
        health:200
      }
    })

    setInterval(() => {
      console.log(state.attr.health);
    }, 2000);

    return {
      ...toRefs(state)
    }
  }


}
</script>

<style lang="less" scoped>
  @import '../../theme.less';
.skill-editor {
  .skill-editor-title{
    height: 100px;
    border: 1px solid @theme-line;
  }
  .skill-editor-list {
    height: calc(100vh - 100px);
  }
}
</style>